import React, {useEffect, useState} from 'react';
import {Space, Table,Tooltip,Button,Switch,Popconfirm,Form,Input} from "antd";
import {FormOutlined,DeleteOutlined,SearchOutlined} from "@ant-design/icons";
import {useAppDispatch} from "@/hooks";
import {
    changeParams,
    deleteHospitalSetBatchRemoveAsync,
    deleteHospitalSetByIdAsync,
    getHospitalSetAsync,
    getHospitalSetLockByIdAsync, postHospitalSetSaveAsync,
    useSelectorHosp
} from "@/store/slices/hosp";
import {useSelectorCommon} from "@/store/slices/common";
import SetModal from "@/pages/hospital/hospitalSet/components/SetModal";
const Item = Form.Item;
function Index() {
    const [form] = Form.useForm();
    const dispatch = useAppDispatch();
    // 定义一个用于指定modal是否弹出的状态isModalOpen
    const [isModalOpen,setIsModalOpen] = useState(false);
    // 定义弹出层的标题
    const [modalTitle,setModalTitle] = useState("添加医院设置");
    const {hospitalSetList} = useSelectorHosp();
    const {pageInfo,loading} = useSelectorCommon();
    // 设置向弹出层弹出的表单信息
    const [info,setInfo] = useState(null);
    // 保存选择好的数据ID列表
    const [selectedRowKeys,setSelectedRowKeys] = useState<React.Key[]>([]);
    // 批量删除加载中
    const [delLoading,setDelLoading] = useState(false);
    useEffect(()=>{
        dispatch(getHospitalSetAsync(1,4));
    },[])
    return (
        <div>
            <Space style={{ marginBottom: 16 }}>
                <Button type={"primary"} onClick={()=>{
                    setModalTitle("添加医院设置");
                    setIsModalOpen(true);
                }}>添加医院设置</Button>

                <Button danger type={"primary"} onClick={async ()=>{
                    for(let i=0;i<10;i++){
                        await dispatch(postHospitalSetSaveAsync({
                            hosname:Math.random().toString(36).slice(2),
                            hoscode:Math.random().toString(36).slice(2),
                            apiUrl:"http://atguigu.cn",
                            contactsName:Math.random().toString(36).slice(2),
                            contactsPhone:"15101134433",

                        }));
                    }

                }}>批量添加</Button>


                <Button type="primary" onClick={async ()=>{
                    setDelLoading(true);
                    await dispatch(deleteHospitalSetBatchRemoveAsync(selectedRowKeys));
                    setSelectedRowKeys([]);
                    setDelLoading(false);
                }} disabled={selectedRowKeys.length==0} loading={delLoading} >
                    批量删除
                </Button>

                <Form
                    form={form}
                    name={"searchHospital"}
                    layout={"inline"}
                    autoComplete={"off"}
                    onFinish={(values:any)=>{
                        dispatch(changeParams(values));
                        dispatch(getHospitalSetAsync(1,4));
                    }}
                >
                    <Item name={"hosname"}>
                        <Input placeholder={"请输入医院名称的关键词"} />
                    </Item>
                    <Item name={"hoscode"}>
                        <Input placeholder={"请输入医院编码"} />
                    </Item>
                    <Item >
                        <Button  icon={<SearchOutlined />} type={"primary"} htmlType={"submit"}>搜索</Button>
                    </Item>
                    <Item>
                        <Button onClick={()=>{
                            form.resetFields();// 清空表单
                            dispatch(changeParams({}));
                            dispatch(getHospitalSetAsync(1,4));
                        }} htmlType={"button"}>重置</Button>
                    </Item>
                </Form>
            </Space>
            <Table
                rowSelection={{
                    selectedRowKeys,
                    onChange(newSelectedRowKeys:React.Key[]){
                        setSelectedRowKeys(newSelectedRowKeys);
                    },
                }}
                loading={loading}
                pagination={{
                   ...pageInfo,
                    onChange(page,pageSize){
                        dispatch(getHospitalSetAsync(page,pageSize));
                    }
                }}
                // 增加边框
                bordered={true}
                // 指定横向的宽度
                scroll={{
                    x:1500
                }}
                // rowSelection={rowSelection}
                columns={[
                    {
                        title:"序号",
                        align:"center",
                        width:70,
                        // dataIndex:"id",
                        // 如果设置了dataIndex,那么render的第一个形参即是dataIndex对应的属性值
                        // 如果未设置dataIndex,那么render的第一个形参即是行信息

                        // 第二个参数是行信息
                        render(value,rows,index){
                            console.log(index)
                            return (pageInfo.current-1)*pageInfo.pageSize+index+1;
                        }
                    },{
                        title:"医院名称",
                        align:"center",
                        ellipsis:true,
                        width:200,
                        dataIndex:"hosname"
                    },{
                        title:"医院编号",
                        align:"center",
                        width:140,
                        ellipsis:true,
                        dataIndex:"hoscode"
                    },{
                        title:"是否锁定",
                        align:"center",
                        // dataIndex:"status",// 0：锁定 1：未锁定
                        render(rows){
                            return (
                                <Switch checked={rows.status===0} onChange={()=>{
                                    dispatch(getHospitalSetLockByIdAsync(rows.id,rows.status));
                                }} />
                            )
                        }

                    },{
                        title:"api基础地址",
                        align:"center",
                        width:140,
                        dataIndex:"apiUrl"
                    },{
                        title:"密钥",
                        align:"center",
                        width:140,
                        ellipsis:true,
                        dataIndex:"signKey"
                    },{
                        title:"联系人姓名",
                        align:"center",
                        dataIndex:"contactsName"
                    },{
                        title:"联系人手机",
                        align:"center",
                        dataIndex:"contactsPhone"
                    },{
                        title:"添加时间",
                        align:"center",
                        width:160,
                        dataIndex:"createTime"
                    },{
                        title:"修改时间",
                        align:"center",
                        width:160,
                        dataIndex:"updateTime"
                    },{
                        title:"操作",
                        fixed:"right",
                        // dataIndex:"updateTime"
                        render(rows){
                            return (
                                <Space>
                                    <Tooltip title="修改">
                                        <Button onClick={()=>{
                                            setInfo({...rows});
                                            setModalTitle("修改医院设置");
                                            setIsModalOpen(true);
                                        }} type="primary" shape="circle" icon={<FormOutlined />} />
                                    </Tooltip>


                                    <Popconfirm
                                        placement="topRight"
                                        title={"您确定要删除"+rows.hosname+"吗"}
                                        onConfirm={()=>{
                                            dispatch(deleteHospitalSetByIdAsync(rows.id));
                                        }}
                                        okText="是"
                                        cancelText="否"
                                    >
                                        <Tooltip title="删除">
                                            <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} />
                                        </Tooltip>
                                    </Popconfirm>
                                </Space>
                            )
                        }
                    }
                ]}
                rowKey={"id"}
                dataSource={hospitalSetList}
            />
            <SetModal info={info} modalTitle={modalTitle} setIsModalOpen={setIsModalOpen} isModalOpen={isModalOpen}/>
        </div>
    );
}

export default Index;